<template>
  <div class="calendar-list">
    <div class="list-header">
      <span>一</span>
      <span>二</span>
      <span>三</span>
      <span>四</span>
      <span>五</span>
      <span>六</span>
      <span>日</span>
    </div>
    <div class="list-body">
      <span
        v-for="item in lists"
        :class="styleObj(item)"
        @click="handleClick(item)"
      >
        {{ item.date }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'

import { useCalendarStore } from '@/stores/calendar.js'
const store = useCalendarStore()
const { lists, date } = storeToRefs(store)
const { lastMonth, nextMonth } = store

const styleObj = computed(() => {
  return (item) => {
    return {
      off: item.type !== 'this',
      active: item.date === date.value && item.type === 'this',
    }
  }
})

const handleClick = (item) => {
  if (item.type === 'last') {
    lastMonth()
  } else if (item.type === 'next') {
    nextMonth()
  }
  date.value = item.date
}
</script>

<style lang="scss" scoped>
.calendar-list {
  padding: 0 20px;
  background-color: #fff;
  .list-header {
    display: flex;
    gap: 20px;
    span {
      flex: 1;
      padding: 10px 0;
      text-align: center;
      font-size: 14px;
      color: #333;
      cursor: default;
      &:nth-child(6),
      &:nth-child(7) {
        color: #4e6ef2;
      }
    }
  }
  .list-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 20px;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 9px;
      font-size: 24px;
      font-weight: bold;
      border-radius: 12px;
      cursor: pointer;
      &:nth-child(7n + 6),
      &:nth-child(7n) {
        color: #4e6ef2;
      }
      &.off {
        opacity: 0.3;
      }
      &:hover {
        background: rgba(78, 110, 242, 0.1);
      }
      &.active {
        border: 2px solid #4e6ef2;
        background-color: rgba(78, 110, 242, 0.2);
      }
    }
  }
}
</style>
